<template>
  <h3>hook的演示</h3>
  <button @click="visible = !visible">显示/隐藏</button>
  <hr>
  <hook-child v-if="visible"></hook-child>
  <hr>
  <div>(自定义hook测试) 鼠标当前光标位置是: {{mousePos.x}} x {{mousePos.y}} </div>
  <hr>

  <div>注意:</div>
  <p>
    1. setup中所有相关生命周期钩子函数(组合式api,包括setup本身)均比配置项中对应生命周期函数执行得更早.<br>
    2. beforeCreate和created钩子函数在setup中没有对应的组合式api,可以用setup本身代替.其它生命周期钩子函数在setup中定义时前面要加"on".<br>
    3. 与vue2相比,beforeDestroy被beforeUnmount代替,destroyed被unmounted代替.<br>
    4. 自定义hook与vue2中的mixin有些类似,可以复用代码,让setup函数更清晰.<br>
  </p>
</template>

<script>
import {ref} from 'vue'
import hookChild from './hookChild.vue'
import useMousePos from './useMousePos'

export default {
  components: {hookChild},
  setup() {
    let visible = ref(true)

    let mousePos = useMousePos()

    return {visible, mousePos}
  },
}
</script>